import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Button, Radio, Upload, Tabs, message } from 'antd';
import React, { useState, useEffect, useMemo } from 'react';
import styles from './style.less'
import { API_URL } from '@/config/api'
import { downFile } from '@/utils/downExcel'

class PrivateData {
  static isHaveData = false;
}

const ShowPic = props => {
  const { lostItemPicManageVisible, lostItemPic, form, onCancel, onSubmit: handleDelImgs, toUpload, status } = props;

  // 展示图片
  const [showLostItemPic, handleShowLostItemPicture] = useState({ goodFileList: [], touristFileList: [], paperFileList: [] })

  // 下载图片
  const downloadImg = (url, twoType) => {
    let name = ''
    if (twoType === 1) {
      name === '遗失物品照片'
    } else if (twoType === 2) {
      name = '身份证'
    } else if (twoType === 3) {
      name = '委托书'
    } else if (twoType === 4) {
      name = '登机牌'
    } else if (twoType === 5) {
      name = '认领单'
    } else if (twoType === 6) {
      name = '上交单'
    } else if (twoType === 7) {
      name = '遗失物品统计单'
    } else if (twoType === 8) {
      name = '快递单'
    } else if (twoType === 9) {
      name = '旅客授权签字图'
    } else if (twoType === 10) {
      name = '其他'
    }
    downFile(API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + url, name)
  }

  // 删除图片
  const del = (oneType, index) => {
    if (oneType === 1) {
      let goodFileListData = showLostItemPic.goodFileList.filter((item, goodIndex) => {
        return goodIndex !== index
      })
      handleShowLostItemPicture({ ...showLostItemPic, goodFileList: goodFileListData })
    } else if (oneType === 2) {
      let touristFileListData = showLostItemPic.touristFileList.filter((item, touristIndex) => {
        return touristIndex !== index
      })
      handleShowLostItemPicture({ ...showLostItemPic, touristFileList: touristFileListData })
    } else {
      let paperFileListData = showLostItemPic.paperFileList.filter((item, paperIndex) => {
        return paperIndex !== index
      })
      handleShowLostItemPicture({ ...showLostItemPic, paperFileList: paperFileListData })
    }
  }

  // 确认
  const okHandle = () => {
    if (PrivateData.isHaveData) {
      handleDelImgs(showLostItemPic);
    } else {
      let isHaveData = false;
      for (let key in showLostItemPic) {
        if (showLostItemPic[key] && showLostItemPic[key].length !== 0) {
          isHaveData = true;
          break;
        }
      }
      if (isHaveData) {
        handleDelImgs(showLostItemPic);
      } else {
        message.warning('图片不能为空');
      }
    }
  };

  useEffect(() => {
    let isHaveData = false;
    for (let key in lostItemPic) {
      if (lostItemPic[key] && lostItemPic[key].length !== 0) {
        isHaveData = true;
        break;
      }
    }
    PrivateData.isHaveData = isHaveData;
    handleShowLostItemPicture(lostItemPic);
    return () => {
      PrivateData.isHaveData = false;
    }
  }, [])

  const isDisabled = useMemo(() => {
    return (+status === 2) ? true : false;
  }, [status]);

  return (
    <Modal
      title={[
        <div key="title">图片管理</div>
      ]}
      className={styles.showPic}
      width="700px"
      visible={lostItemPicManageVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <div>
        <Button type="primary" disabled={isDisabled} onClick={() => toUpload(showLostItemPic)}>上传</Button>
        <Tabs tabPosition='left'>
          <Tabs.TabPane tab="物品相关" key="1">
            {
              showLostItemPic.goodFileList.map((item, index) => (
                <Row align='middle'>
                  <Col span={16}>
                    <img src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + item.imgUrl} alt=""/>
                    <span className={styles.imgName}>遗失物品照片</span>
                  </Col>
                  <Col span={8}>
                    {(!isDisabled) && <>
                      <span onClick={() => downloadImg(item.imgUrl, 1)} className={styles.downloadBtn}>下载</span>
                      <span onClick={() => del(item.oneType, index)} className={styles.delBtn}>删除</span>
                    </>}
                  </Col>
                </Row>
              ))
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab="单据相关" key="3">
            {
              showLostItemPic.paperFileList.map((item, index) => (
                <Row align='middle'>
                  <Col span={16}>
                    <img src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + item.imgUrl} alt="" />
                    <span className={styles.imgName}>
                      {item.twoType === 5 ? '认领单' : ''}
                      {item.twoType === 6 ? '上交单' : ''}
                      {item.twoType === 7 ? '遗失物品统计单' : ''}
                      {item.twoType === 8 ? '快递单' : ''}
                      {item.twoType === 9 ? '旅客授权签字图' : ''}
                      {item.twoType === 10 ? '其他' : ''}
                    </span>
                  </Col>
                  <Col span={8}>
                    {(!isDisabled) && <>
                      <span onClick={() => downloadImg(item.imgUrl, item.twoType)} className={styles.downloadBtn}>下载</span>
                      <span onClick={() => del(item.oneType, index)} className={styles.delBtn}>删除</span>
                    </>}
                  </Col>
                </Row>
              ))
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab="旅客相关" key="2">
            {
              showLostItemPic.touristFileList.map((item, index) => (
                <Row align='middle'>
                  <Col span={16}>
                    <img src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + item.imgUrl} alt="" />
                    <span className={styles.imgName}>
                      {item.twoType === 2 ? '身份证' : ''}
                      {item.twoType === 3 ? '委托书' : ''}
                      {item.twoType === 4 ? '登机牌' : ''}
                      {item.twoType === 10 ? '其他' : ''}
                    </span>
                  </Col>
                  <Col span={8}>
                    {(!isDisabled) && <>
                      <span onClick={() => downloadImg(item.imgUrl, item.twoType)} className={styles.downloadBtn}>下载</span>
                      <span onClick={() => del(item.oneType, index)} className={styles.delBtn}>删除</span>
                    </>}
                  </Col>
                </Row>
              ))
            }
          </Tabs.TabPane>
        </Tabs>
      </div>
    </Modal>
  );
};

export default Form.create()(ShowPic);
